<!DOCTYPE html>
<html lang="en">
<head>
    {% load staticfiles %}
    <meta charset="UTF-8">
    <title>Datatable Demo</title>
    <link href="{% static 'font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css"/>
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="{% static 'datatables-1.10.13/media/css/dataTables.bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'datatables-1.10.13/extensions/Select/css/select.bootstrap.min.css' %}">
</head>
<body>

<div>
    <h1>datatables-前端分页</h1>
    <table class="table table-striped table-hover table-bordered NoNewline" id="table" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th title="" class="select-checkbox" orderable="false" width="60px" data="id">&nbsp;</th>
            <th title="组名称" data="name"></th>
            <th title="排序" data="order_id"></th>
            <th title="parent_id" data="parent_id"></th>
            <th title="编辑" data="id" width="100px"><a class="btn btn-sm blue tab_edit" param="data">确认</a></th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>

<div>
    <h1>datatables-后端分页</h1>
    <table class="table table-striped table-hover table-bordered NoNewline" id="table1" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th title="id" data="id"></th>
            <th title="组名称" data="name"></th>
            <th title="排序" data="order_id"></th>
            <th title="parent_id" data="parent_id"></th>
            <th title="编辑" data="id" width="100px"><a class="btn btn-sm blue tab_edit" param="data">确认</a></th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>

<div>
    <h1>datatables-treegrid</h1>
    <table class="table table-striped table-hover table-bordered NoNewline" id="table2" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th></th>
            <th title="组名称" data="name"></th>
            <th title="排序" data="order_id"></th>
            <th title="parent_id" data="parent_id"></th>
            <th title="编辑" data="id" width="100px"><a class="btn btn-sm blue tab_edit" param="data">确认</a></th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
<div>
    <h1>form-表单提交<h3>注意序列化提交</h3></h1>
    <form id="form" class="form-horizontal" style="width: 450px">
        <div class="form-body">
            <div class="form-group">
                <div class="col-sm-4 col-md-4 control-label">组id<span class="required">
										* </span></div>
                <div class="col-sm-8 col-md-8">
                    <input id="id" name="p_id">
                    <input type="button" id="btnRetrieve" value="加载">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-4 col-md-4 control-label">组名称<span class="required">
										* </span></div>
                <div class="col-sm-8 col-md-8">
                    <input name="p_name">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 col-md-4 control-label">排序<span class="required">
										* </span></div>
                <div class="col-sm-8 col-md-8">
                    <input name="p_order_id">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 col-md-4 control-label">父组织id<span class="required">
										* </span></div>
                <div class="col-sm-8 col-md-8">
                    <input name="p_parent_id">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-12 col-md-12">
                    <input type="button" id="btnCreate" value="新建">
                </div>
                <div class="col-sm-8 col-md-8">
                    <input type="button" id="btnUpdate" value="修改">
                </div>
            </div>
        </div>

    </form>
</div>


<script type="text/javascript" src="{% static 'jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'jquery.cookie.js' %}"></script>
<script type="text/javascript" src="{% static 'datatables-1.10.13/media/js/jquery.dataTables.min.js' %}"></script>
<script rel="text/javascript" href="{% static 'datatables-1.10.13/media/js/dataTables.bootstrap.min.js' %}"></script>
<script src="{% static 'datatables-1.10.13/extensions/TreeGrid/dataTables.treeGrid.js' %}"></script>
<script type="text/javascript"
        src="{% static 'datatables-1.10.13/extensions/Select/js/dataTables.select.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/common.js' %}"></script>

<script>
    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        dataType: "json"
    });
    $(document).ready(function () {
        init_button();
        init_datatable();
    });

    function init_button() {
        $('#btnCreate').click(function () {

            $('#btnCreate').attr("disabled", true);
            ajax({
                url: "{% url 'group_create' %}",
                // 使用表单序列化
                data: $('#form').serialize(),//额外参数使用 + "&" + $.param({p_id: p_id})
                success: function (data) {
                    // 重新加载表格
                    mytable.ajax.reload();
                    mytable1.ajax.reload();
                    mytable2.ajax.reload();
                    alert('添加成功');
                },
                complete: function () {
                    $('#btnCreate').removeAttr("disabled");
                }
            });
        });
        $('#btnUpdate').click(function () {

            $('#btnUpdate').attr("disabled", true);
            ajax({
                url: "{% url 'group_update' %}",
                // 使用表单序列化
                data: $('#form').serialize(),//额外参数使用 + "&" + $.param({p_id: p_id})
                success: function (data) {
                    // 重新加载表格
                    mytable.ajax.reload();
                    mytable1.ajax.reload();
                    mytable2.ajax.reload();
                    alert('更新成功');
                },
                complete: function () {
                    $('#btnUpdate').removeAttr("disabled");
                }
            });
        });

        $('#btnRetrieve').click(function () {

            $('#btnRetrieve').attr("disabled", true);
            ajax({
                url: "{% url 'group_retrieve' %}",
                // 使用表单序列化
                data: $.param({p_id: $('#id').val()}),
                success: function (data) {
                    // 使用name 或id进行赋值
                    $("input[name='p_name']").val(data.data.name);
                    $("input[name='p_parent_id']").val(data.data.parent_id);
                    $("input[name='p_order_id']").val(data.data.order_id);
                },
                complete: function () {
                    $('#btnRetrieve').removeAttr("disabled");
                }
            });
        });

    }

    function init_datatable() {
        mytable = initDataTable("#table", {
            "ajax": {
                url: "{% url 'group_lists' %}",
                "data": function () {
                    // 传参数，过滤条件
                    return {
                        "p_sts": $('#select_sts').val(),
                    };
                },
            },
            "select": {
                style: 'multi',
                selector: 'td:first-child'
            },
            "fontAllSelect": true,
            "dataTableName": 'mytable'
        });
        $("#table").delegate(".tab_edit", "click", function () {
            var id = $(this).attr("param");
            alert(id);
        });

        mytable1 = initDataTable("#table1", {
            "ajax": {
                url: "{% url 'group_page' %}",
                "data": function () {
                    // 传参数，过滤条件
                    return {
                        "p_sts": 'VALID',
                    };
                },
            },
            searching: true,
            processing: true,
            serverSide: true,
        });
        $("#table1").delegate(".tab_edit", "click", function () {
            var id = $(this).attr("param");
            alert(id);
        });

        mytable2 = initDataTable("#table2", {
            "ordering": false, //禁用排序
            "searching": false,
            "ajax": {
                url: "{% url 'group_tree' %}",
                "type": "POST",
                "data": function () {
                    // 传参数，过滤条件
                    return {
                        "p_sts": $('#select_sts').val(),
                    };
                },
            },
            'treeGrid': {
                'left': 15,
                'expandIcon': '<span><i class="fa fa-plus-square"></i></span>',
                'collapseIcon': '<span><i class="fa fa-minus-square"></i></span>'
            },
            columns: [{
                title: '',
                target: 0,
                className: 'treegrid-control',
                data: function (item) {
                    if (item.children) {
                        return '<span><i class="fa fa-plus-square"></i></span>';
                    }
                    return '';
                }
            }],
        });
        $("#table2").delegate(".tab_edit", "click", function () {
            var id = $(this).attr("param");
            alert(id);
        });
    }


</script>

</body>
</html>